<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue基础</title>
    <!--
        vue.js: 前端js框架,主要关注视图层
        html就是模板,支持简洁版的模板语法
    -->
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <!--
            v-once: vue提供的一个指令,
            一次绑定,数据发生变化了,页面不会变化
        -->
       <span v-once> {{message}}</span>
       <!--
           v-bind: 绑定标签属性;
           简写为 :
       -->
        <!--<h1 v-bind:title="name">{{name}}-{{age}}</h1>-->
        <h1 :title="name">{{name}}{{age}}</h1>

        <!--  {{}}:纯文本  -->
        <p>{{text}}</p>
        <!--  v-html: 解析为html  -->
        <p v-html="text"></p>

        <p>{{a+b}}</p>
        <p>{{ message.split('').reverse().join('') }}</p>
        <p>{{new Date()}}</p>
        <p>{{Math.random()}}</p>

    </div>
    <script>
        // 当你导入vue.js之后,全局作用域下就会有一个Vue变量;
        console.log(Vue);
        // 创建一个Vue到实例;
        // el:element, 选择器,限定Vue到作用范围;
        // data: 数据, 当前Vue实例需要的数据;
        // 视图模板中使用的变量会从data中找
        var app = new Vue({
            el: "#app",
            data: {
                message: "hello Vue",
                name: '小许子',
                age: null,
                text:'<a href="http://www.baidu.com">百度一下</a>',
                a:12,
                b:21,
            },
            // 生命周期函数
            created: function () {
                console.log("1--新建Vue实例完成");
            },
            mounted: function () {
                // 一般会在这里发请求,获取页面展示所需数据
                console.log('2--vue实例挂载到dom上');
            },
            updated: function () {
                console.log('3--vue实例更新了');
            },
            destroyed: function () {
                console.log('4--vue实例销毁了');
            }
        })
        console.log(app);

        // 数据在视图上使用,一定要确保在data中声明
        // 如果在开始没有值,可以null,0,'';


        // Vue中数据和DOM是绑定到一起到，并且是响应式的；
        // 数据发生变化了，页面会自动修改；

        setTimeout(function () {
            app.message = "再别康桥";
            app.name = "轻轻地你走了,那就永远不要再回来了";
            app.age=34
        }, 3000);

        app.age = 12;
        // $watch: 监视
        //  监视到前面的变量发生变化时,会执行后面的回调函数
        app.$watch('message', function (newvalue, oldvalue) {
            console.log('message发生变化了');
            // 旧值
            console.log(oldvalue);
            // 新值
            console.log(newvalue);
            console.log(this);
        })

















        // MVVM架构模式: 是MVC到细化,把MVC中的m分为m,vm
        // model-view-viewmodel
        // 模型-视图-视图模型

        // MVC 架构模式
        // model-view-controller
        // 模型-视图-控制器
        // 模型: 数据模型;
        // 模型: 数据模型; 负责数据的保存,操作;
        // 视图: 负责数据的展示,页面交互操作
        // 控制器: 控制模型中的数据展示到视图中
    </script>
</body>

</html>